<style scoped>
.gap {
  margin: 5px;
}
</style>
<template>
  <div>
    <div class="ivu-mt gap">
      <el-card :bordered="false">
        <p class="card-title">
          {{$t('message.term.legal_costs_calculator')}}
        </p>
        <el-divider dashed />
        <el-row :gutter="30">
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="案件类型">
                <el-select v-model="form.caseType" @change="onCaseTypeChange" style="width: 400px">
                  <el-option v-for="item in caseTypeList" :value="item.value" :key="item.value">{{item.value}}</el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="案件标的" v-if="needCaseObjectSwitch">
                <el-input v-model="form.caseObject" placeholder="请输入金额" style="width: 400px">
                  <span slot="append">元</span>
                </el-input>
              </el-form-item>
            </el-form>
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="受理费">
                <el-input v-model="form.acceptanceFees" readonly style="width: 400px"><span slot="append">元</span></el-input>
                <span>{{ form.feeDesc }}</span>
              </el-form-item>
              <el-form-item label="保全费" v-if="maintenamceCostsSwitch">
                <el-input v-model="form.maintenamceCosts" readonly style="width: 400px"><span slot="append">元</span></el-input>
              </el-form-item>
              <el-form-item label="执行费" v-if="executionFeesSwitch">
                <el-input v-model="form.executionFees" readonly style="width: 400px"><span slot="append">元</span></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="calculate()">计算</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :xs="0" :sm="0" :md="12" :lg="12">
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>
<script>
import { API } from '../../customized/http/api';
import Util from '../../customized/util/utils';
export default {
  components: {

  },
  data() {
    return {
      maintenamceCostsSwitch: true,
      executionFeesSwitch: true,
      needCaseObjectSwitch: true,
      form: {
        caseType: "",
        caseObject: "",
        acceptanceFees: "",
        maintenamceCosts: "",
        executionFees: "",
        feeDesc: ""
      },
      cityList: [],
      caseTypeList: [{
        value: '财产案件'
      }, {
        value: '离婚案件'
      }, {
        value: '人格权案件'
      }, {
        value: '其他非财产案件'
      }, {
        value: '知识产权案件'
      }, {
        value: '支付令申请'
      }, {
        value: '破产案件'
      }, {
        value: '劳动争议案件'
      }, {
        value: '行政案件'
      }, {
        value: '管辖权异议案件'
      }, {
        value: '公示催告申请'
      }, {
        value: '撤销仲裁裁决或认定仲裁协议效力申请'
      }, {
        value: '海事案件申请'
      }]
    }
  },
  mounted() {
    this.$nextTick(() => {

    });
  },
  watch: {

  },
  computed: {

  },
  methods: {
    calculate() {
      let caseType = this.form.caseType;
      let caseObject = this.form.caseObject;

      if (!caseType) {
        this.$notify.error({
          title: '错误',
          message: '请选择正确的案件类型'
        });
        return;
      }

      if (caseObject == undefined) {
        this.$notify.error({
          title: '错误',
          message: '请选择正确的案件标的'
        });
        return;
      }

      if(!Util.isNumber(caseObject + "")) {
        this.$notify.error({
          title: '错误',
          message: '请选择正确的案件标的'
        });
        return;
      }

      if(caseType == '财产案件' && caseObject == 0) {
        this.$notify.error({
          title: '错误',
          message: '请重新选择案件类型'
        });
        return;
      }

      let postJson = {};
      postJson.caseType = caseType;
      postJson.caseObject = caseObject;

      API.getCaseAcceptanceFees(postJson)
          .then((response) => {
            let result = response.data;
            let acceptanceFeesRange = result.fee;
            if (acceptanceFeesRange.length === 2) {
              if (acceptanceFeesRange[0] === acceptanceFeesRange[1]) {
                this.form.acceptanceFees = acceptanceFeesRange[0]
              } else {
                this.form.acceptanceFees = acceptanceFeesRange[0] + " - " + acceptanceFeesRange[1]
              }
            }
            this.form.feeDesc = result.feedesc;

            // if (result.feeDesc) {
            //   this.form.feeDesc = result.feeDesc;
            // }

            this.form.maintenamceCosts = result.preservation;
            let executionFeesRange = result.execution;
            if (!!executionFeesRange && executionFeesRange.length === 2) {
              if (executionFeesRange[0] === executionFeesRange[1]) {
                this.form.executionFees = executionFeesRange[0]
              } else {
                this.form.executionFees = executionFeesRange[0] + " - " + executionFeesRange[1]
              }
            }

            // this.maintenamceCostsSwitch = result.isPreservationCostsAvail;
            //
            // this.executionFeesSwitch = result.isExecutionFeesAvail;

          }).catch((error) => {
        console.log(error);
      });
    },
    reset() {
      this.needCaseObjectSwitch = true;
      this.executionFeesSwitch = true;
      this.maintenamceCostsSwitch = true;

      this.form.acceptanceFees = "";
      this.form.maintenamceCosts = "";
      this.form.executionFees = "";
      this.form.feeDesc = "";
    },
    onCaseTypeChange(value) {
      this.reset();
      if(value === '其他非财产案件' || value === '管辖权异议案件' || value === '公示催告申请' || value === '撤销仲裁裁决或认定仲裁协议效力申请') {
        this.needCaseObjectSwitch = false;
        this.form.caseObject = 0;
      }
      if(value === '破产案件' || value === '撤销仲裁裁决或认定仲裁协议效力申请' || value === '公示催告申请' || value === '管辖权异议案件') {
        this.maintenamceCostsSwitch = false;
        this.form.caseObject = 0;
        this.executionFeesSwitch = false;
        this.form.executionFees = 0;
      }
    },
  }
}
</script>